<template>
  <view class="order-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-content">
        <text class="header-title">订单管理</text>
        <view class="header-actions">
          <uni-icons type="search" size="20" color="#fff" @click="toggleSearch" />
        </view>
      </view>
    </view>

    <!-- 数据概览卡片 -->
    <view class="overview-section">
      <view class="overview-card">
        <view class="overview-item" @click="quickFilter('all')">
          <text class="overview-value">{{ statistics.total_orders }}</text>
          <text class="overview-label">总订单</text>
        </view>
        <view class="overview-item" @click="quickFilter('pending')">
          <text class="overview-value">{{ statistics.pending_orders }}</text>
          <text class="overview-label">待处理</text>
        </view>
        <view class="overview-item" @click="quickFilter('amount')">
          <text class="overview-value">¥{{ (statistics.total_amount / 100).toFixed(0) }}</text>
          <text class="overview-label">总金额</text>
        </view>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-section" v-if="showSearch">
      <view class="search-card">
        <view class="search-input-wrapper">
          <input 
            v-model="searchKeyword"
            placeholder="输入订单号或会员信息搜索"
            class="search-input"
            @confirm="handleSearch"
          />
          <button class="search-btn" @click="handleSearch">搜索</button>
        </view>
      </view>
    </view>

    <!-- 功能模块网格 -->
    <view class="modules-section">
      <view class="modules-grid">
        <view 
          class="module-card" 
          v-for="module in modules" 
          :key="module.key"
          @click="navigateToModule(module)"
        >
          <view class="module-icon">
            <uni-icons :type="module.icon" size="32" :color="module.color" />
          </view>
          <text class="module-title">{{ module.title }}</text>
          <text class="module-desc">{{ module.desc }}</text>
          <view class="module-badge" v-if="module.badge">
            <text class="badge-text">{{ module.badge }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 快捷操作区 -->
    <view class="quick-actions">
      <text class="section-title">快捷操作</text>
      <scroll-view class="actions-scroll" scroll-x>
        <view class="actions-list">
          <view class="action-item" @click="createOrder">
            <view class="action-icon">
              <uni-icons type="plus" size="24" color="#1890FF" />
            </view>
            <text class="action-text">代客下单</text>
          </view>
          <view class="action-item" @click="openAdvancedFilter">
            <view class="action-icon">
              <uni-icons type="tune" size="24" color="#1890FF" />
            </view>
            <text class="action-text">高级筛选</text>
          </view>
          <view class="action-item" @click="enterBatchMode">
            <view class="action-icon">
              <uni-icons type="checkbox" size="24" color="#1890FF" />
            </view>
            <text class="action-text">批量操作</text>
          </view>
          <view class="action-item" @click="exportData">
            <view class="action-icon">
              <uni-icons type="download" size="24" color="#1890FF" />
            </view>
            <text class="action-text">数据导出</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 状态标签页 -->
    <view class="tabs-section">
      <text class="section-title">订单状态</text>
      <view class="tabs-card">
        <uni-segmented-control
          :current="currentTab"
          :values="tabItems"
          @clickItem="onClickTab"
          style-type="text"
          active-color="#1890FF"
        ></uni-segmented-control>
      </view>
    </view>

    <!-- 高级筛选标签显示 -->
    <view v-if="hasActiveFilters" class="filter-section">
      <view class="filter-card">
        <scroll-view scroll-x class="filter-tags">
          <view class="filter-tag" v-for="filter in activeFilters" :key="filter.key" @click="removeFilter(filter.key)">
            <text class="filter-text">{{ filter.label }}</text>
            <uni-icons type="closeempty" size="12" color="#fff"></uni-icons>
          </view>
        </scroll-view>
        <text class="clear-filters" @click="clearAllFilters">清空</text>
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="order-list-section">
      <text class="section-title">订单列表</text>
      <scroll-view 
        class="order-list-scroll"
        scroll-y
        @scrolltolower="handleLoadMore"
        refresher-enabled
        @refresherrefresh="handleRefresh"
        :refresher-triggered="isRefreshing"
      >
        <!-- 加载状态 -->
        <view v-if="loading && orderList.length === 0" class="loading-state">
          <view class="loading-skeleton" v-for="i in 5" :key="i">
            <view class="skeleton-line"></view>
            <view class="skeleton-line short"></view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view v-else-if="orderList.length === 0 && !loading" class="empty-state">
          <text class="empty-icon">📋</text>
          <text class="empty-title">暂无订单</text>
          <text class="empty-desc">暂时没有找到相关订单</text>
          <button class="retry-btn" @click="handleRefresh">重新加载</button>
        </view>
        
        <!-- 订单列表 -->
        <view v-else class="order-list">
          <view
            class="order-card"
            v-for="order in orderList"
            :key="order.id"
            @click="navigateToDetail(order.id)"
          >
            <view class="card-header">
              <text class="order-no">{{ order.order_no }}</text>
              <uni-tag :text="getOrderStatus(order.status).text" :type="getOrderStatus(order.status).type" size="small" />
            </view>
            <view class="card-body">
              <view class="info-row">
                <view class="info-item">
                  <text class="info-label">门店</text>
                  <text class="info-value">{{ order.store?.name || 'N/A' }}</text>
                </view>
                <view class="info-item">
                  <text class="info-label">场地</text>
                  <text class="info-value">{{ order.venue?.name || 'N/A' }}</text>
                </view>
              </view>
              <view class="info-row">
                <view class="info-item">
                  <text class="info-label">会员</text>
                  <text class="info-value">{{ order.member?.name || 'N/A' }}</text>
                </view>
                <view class="info-item">
                  <text class="info-label">支付</text>
                  <uni-tag :text="getPaymentStatus(order.payment_status).text" :type="getPaymentStatus(order.payment_status).type" size="mini" />
                </view>
              </view>
            </view>
            <view class="card-footer">
              <text class="time">{{ formatTime(order.created_at) }}</text>
              <text class="amount">¥{{ (order.total_amount / 100).toFixed(2) }}</text>
            </view>
          </view>
        </view>
        
        <!-- 加载更多状态 -->
        <view v-if="loading && orderList.length > 0" class="load-more">
          <text>加载中...</text>
        </view>
        <view v-else-if="!hasMore && orderList.length > 0" class="load-more">
          <text>没有更多数据了</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { fetchOrders, fetchOrderStatistics, fetchStoreList } from '@/api/order';
import moment from 'moment';

// 定义本地类型接口
interface Order {
  id: number;
  order_no: string;
  store_id: number;
  venue_id: number;
  member_id: number;
  status: OrderStatus;
  payment_status: PaymentStatus;
  total_amount: number;
  created_at: number;
  store?: Store;
  venue?: Venue;
  member?: Member;
}

interface OrderQuery {
  page?: number;
  pageSize?: number;
  keyword?: string;
  status?: OrderStatus;
  store_id?: number;
  venue_id?: number;
  payment_status?: PaymentStatus[];
  start_date?: string;
  end_date?: string;
  min_amount?: number;
  max_amount?: number;
}

interface Store {
  id: number;
  name: string;
  address: string;
}

interface Venue {
  id: number;
  name: string;
  store_id: number;
}

interface Member {
  id: number;
  name: string;
  phone: string;
}

enum OrderStatus {
  Pending = 1,
  Confirmed = 2,
  Completed = 3,
  Cancelled = 4,
  Rescheduled = 5,
}

enum PaymentStatus {
  Unpaid = 1,
  Paid = 2,
  Refunded = 3,
}

const orderList = ref<Order[]>([]);
const showSearch = ref(false);
const queryParams = reactive<OrderQuery>({
  page: 1,
  pageSize: 10,
  keyword: '',
  status: undefined,
});

// 搜索相关状态
const searchHistory = ref<string[]>([]);
const showSearchSuggestions = ref(false);
const searchSuggestions = ref<string[]>([]);

// 搜索建议列表（适配SearchBar组件）
const searchSuggestionsList = computed(() => {
  return searchSuggestions.value.map(text => ({
    text,
    type: searchHistory.value.includes(text) ? 'history' as const : 'suggestion' as const
  }));
});

// 热门搜索标签
const hotSearchTags = ref<string[]>(['今日订单', '待处理', '已完成', '高价值订单']);

// 搜索关键词计算属性（确保不为undefined）
const searchKeyword = computed({
  get: () => queryParams.keyword || '',
  set: (value: string) => {
    queryParams.keyword = value;
  }
});

const loading = ref(false);
const isRefreshing = ref(false);
const hasMore = ref(true);

// 统计数据
const statistics = ref({
  total_orders: 0,
  pending_orders: 0,
  today_orders: 0,
  total_amount: 0,
  completed_orders: 0,
  cancelled_orders: 0,
});

// 筛选相关
const activeFilters = ref<Array<{ key: string; label: string }>>([]);
const advancedFilters = ref<any>({});

const loadingStatus = computed(() => {
  if (loading.value) return 'loading';
  return hasMore.value ? 'more' : 'nomore';
});

const hasActiveFilters = computed(() => {
  return activeFilters.value.length > 0;
});

const currentTab = ref(0);
const tabItems = ['全部', '待处理', '已确认', '已完成', '已取消'];
const statusMap = [undefined, OrderStatus.Pending, OrderStatus.Confirmed, OrderStatus.Completed, OrderStatus.Cancelled];

// 功能模块配置
const modules = ref([
  {
    key: 'pending',
    title: '待处理订单',
    desc: '需要处理',
    icon: 'clock',
    color: '#FA8C16',
    badge: statistics.value.pending_orders > 0 ? statistics.value.pending_orders.toString() : '',
  },
  {
    key: 'today',
    title: '今日订单',
    desc: '今天的订单',
    icon: 'calendar',
    color: '#1890FF',
    badge: '',
  },
  {
    key: 'completed',
    title: '已完成',
    desc: '完成的订单',
    icon: 'checkmarkempty',
    color: '#52C41A',
    badge: '',
  },
  {
    key: 'statistics',
    title: '订单统计',
    desc: '数据分析',
    icon: 'bars',
    color: '#722ED1',
    badge: '',
  },
]);

const storeCache = ref<Map<number, Store>>(new Map());
const venueCache = ref<Map<number, Venue>>(new Map());
const memberCache = ref<Map<number, Member>>(new Map());

const preloadAllData = async () => {
  if (storeCache.value.size > 0) return;
  try {
    // 使用可用的API获取门店数据
    const storeRes = await fetchStoreList();
    if (storeRes && Array.isArray(storeRes)) {
      storeRes.forEach((s: any) => storeCache.value.set(s.id, s));
    }
    
    // 模拟会员数据（实际项目中应该有对应的API）
    const mockMembers: Member[] = [
      { id: 1, name: '张三', phone: '13800138001' },
      { id: 2, name: '李四', phone: '13800138002' },
      { id: 3, name: '王五', phone: '13800138003' },
    ];
    mockMembers.forEach(m => memberCache.value.set(m.id, m));
    
  } catch (error) {
    console.error('预加载数据失败:', error);
  }
};

// 获取统计数据
const getStatistics = async () => {
  try {
    const params: any = {};
    
    // 如果有门店筛选，添加到统计参数中
    if (advancedFilters.value.store_id) {
      params.store_id = advancedFilters.value.store_id;
    }
    
    // 如果有时间范围筛选，添加到统计参数中
    if (advancedFilters.value.start_date) {
      params.start_date = advancedFilters.value.start_date;
    }
    
    if (advancedFilters.value.end_date) {
      params.end_date = advancedFilters.value.end_date;
    }
    
    const res = await fetchOrderStatistics(params);
    statistics.value = {
      ...statistics.value,
      ...res
    };
  } catch (error) {
    console.error('获取统计数据失败:', error);
    // 如果获取统计数据失败，使用默认值
    statistics.value = {
      total_orders: 0,
      pending_orders: 0,
      today_orders: 0,
      total_amount: 0,
      completed_orders: 0,
      cancelled_orders: 0,
    };
  }
};

const getOrderList = async (isRefresh = false) => {
  if (loading.value) return;
  loading.value = true;

  if (isRefresh) {
    queryParams.page = 1;
  }

  try {
    const params = buildQueryParams();
    const res = await fetchOrders(params);
    
    const populatedOrders = res.list.map((order: any) => ({
      ...order,
      store: storeCache.value.get(order.store_id),
      venue: venueCache.value.get(order.venue_id),
      member: memberCache.value.get(order.member_id),
    })) as Order[];

    if (isRefresh) {
      orderList.value = populatedOrders;
    } else {
      orderList.value = [...orderList.value, ...populatedOrders];
    }

    hasMore.value = orderList.value.length < res.total;
    
    // 设置统计数据
    if (res.statistics) {
      statistics.value = res.statistics;
    }
    
    if (queryParams.page) {
      queryParams.page++;
    } else {
      queryParams.page = 2;
    }

  } catch (error) {
    console.error('获取订单列表失败:', error);
    uni.showToast({ title: '获取订单列表失败', icon: 'none' });
  } finally {
    loading.value = false;
    isRefreshing.value = false;
  }
};

const handleSearch = (keyword?: string) => {
  // 如果传入了关键词，则使用传入的关键词
  if (keyword) {
    queryParams.keyword = keyword;
  }
  
  // 保存搜索历史
  if (queryParams.keyword && queryParams.keyword.trim()) {
    saveSearchHistory(queryParams.keyword.trim());
  }
  getOrderList(true);
};

// 保存搜索历史
const saveSearchHistory = (keyword: string) => {
  const history = searchHistory.value;
  const index = history.indexOf(keyword);
  
  if (index > -1) {
    history.splice(index, 1);
  }
  
  history.unshift(keyword);
  
  // 最多保存10条历史记录
  if (history.length > 10) {
    history.pop();
  }
  
  // 保存到本地存储
  uni.setStorageSync('order_search_history', history);
};

// 加载搜索历史
const loadSearchHistory = () => {
  try {
    const history = uni.getStorageSync('order_search_history');
    if (history && Array.isArray(history)) {
      searchHistory.value = history;
    }
  } catch (error) {
    console.error('加载搜索历史失败:', error);
  }
};

// 清空搜索历史
const clearSearchHistory = () => {
  searchHistory.value = [];
  uni.removeStorageSync('order_search_history');
  uni.showToast({ title: '已清空搜索历史', icon: 'success' });
};

// 选择搜索建议
const selectSearchSuggestion = (suggestion: { text: string; type: 'history' | 'suggestion' }) => {
  queryParams.keyword = suggestion.text;
  showSearchSuggestions.value = false;
  handleSearch();
};

const handleRefresh = () => {
  isRefreshing.value = true;
  getOrderList(true);
};

const handleLoadMore = () => {
  if (hasMore.value && !loading.value) {
    getOrderList();
  }
};

const onClickTab = (e: { currentIndex: number }) => {
  if (currentTab.value !== e.currentIndex) {
    currentTab.value = e.currentIndex;
    queryParams.status = statusMap[e.currentIndex];
    handleSearch();
  }
};

const navigateToDetail = (id: number) => {
  uni.navigateTo({ url: `/pages/orders/detail?id=${id}` });
};

// 导航到模块页面
const navigateToModule = (module: any) => {
  switch (module.key) {
    case 'pending':
      currentTab.value = 1;
      queryParams.status = OrderStatus.Pending;
      handleSearch();
      break;
    case 'today':
      quickFilter('today');
      break;
    case 'completed':
      currentTab.value = 3;
      queryParams.status = OrderStatus.Completed;
      handleSearch();
      break;
    case 'statistics':
      uni.navigateTo({ url: '/pages/orders/statistics' });
      break;
  }
};

// 快速筛选
const quickFilter = (type: string) => {
  switch (type) {
    case 'all':
      currentTab.value = 0;
      queryParams.status = undefined;
      break;
    case 'pending':
      currentTab.value = 1;
      queryParams.status = OrderStatus.Pending;
      break;
    case 'today':
      // 设置今日筛选
      const today = new Date();
      const startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
      const endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);
      advancedFilters.value.start_date = startOfDay.toISOString().split('T')[0];
      advancedFilters.value.end_date = endOfDay.toISOString().split('T')[0];
      updateActiveFilters();
      break;
    case 'amount':
      // 可以添加金额排序或筛选逻辑
      break;
  }
  handleSearch();
};

// 切换搜索栏显示
const toggleSearch = () => {
  showSearch.value = !showSearch.value;
};

// 打开高级筛选
const openAdvancedFilter = () => {
  const params = encodeURIComponent(JSON.stringify(advancedFilters.value));
  uni.navigateTo({ url: `/pages/orders/filter?params=${params}` });
};

// 进入批量模式
const enterBatchMode = () => {
  uni.navigateTo({ url: '/pages/orders/batch' });
};

// 代客下单
const createOrder = () => {
  uni.navigateTo({ url: '/pages/orders/create' });
};

// 数据导出
const exportData = () => {
  uni.showToast({
    title: '数据导出功能开发中',
    icon: 'none'
  });
};

// 应用筛选（从筛选页面返回时调用）
const applyFilter = (filters: any) => {
  advancedFilters.value = filters;
  updateActiveFilters();
  handleSearch();
};

// 处理筛选参数到查询参数的转换
const buildQueryParams = () => {
  const params: any = { ...queryParams };
  
  // 合并高级筛选参数
  if (advancedFilters.value.store_id) {
    params.store_id = advancedFilters.value.store_id;
  }
  
  if (advancedFilters.value.venue_id) {
    params.venue_id = advancedFilters.value.venue_id;
  }
  
  if (advancedFilters.value.payment_status && advancedFilters.value.payment_status.length > 0) {
    params.payment_status = advancedFilters.value.payment_status;
  }
  
  if (advancedFilters.value.start_date) {
    params.start_date = advancedFilters.value.start_date;
  }
  
  if (advancedFilters.value.end_date) {
    params.end_date = advancedFilters.value.end_date;
  }
  
  if (advancedFilters.value.min_amount) {
    params.min_amount = advancedFilters.value.min_amount;
  }
  
  if (advancedFilters.value.max_amount) {
    params.max_amount = advancedFilters.value.max_amount;
  }
  
  return params;
};

// 更新活跃筛选标签
const updateActiveFilters = () => {
  const filters = [];
  
  if (advancedFilters.value.store_id) {
    const store = storeCache.value.get(advancedFilters.value.store_id);
    filters.push({ key: 'store_id', label: `门店: ${store?.name || ''}` });
  }
  
  if (advancedFilters.value.venue_id) {
    const venue = venueCache.value.get(advancedFilters.value.venue_id);
    filters.push({ key: 'venue_id', label: `场地: ${venue?.name || ''}` });
  }
  
  if (advancedFilters.value.payment_status && advancedFilters.value.payment_status.length > 0) {
    filters.push({ key: 'payment_status', label: '支付状态' });
  }
  
  if (advancedFilters.value.start_date && advancedFilters.value.end_date) {
    filters.push({ key: 'date_range', label: '时间范围' });
  }
  
  if (advancedFilters.value.min_amount || advancedFilters.value.max_amount) {
    filters.push({ key: 'amount_range', label: '金额范围' });
  }
  
  activeFilters.value = filters;
};

// 移除筛选条件
const removeFilter = (key: string) => {
  switch (key) {
    case 'store_id':
      delete advancedFilters.value.store_id;
      break;
    case 'venue_id':
      delete advancedFilters.value.venue_id;
      break;
    case 'payment_status':
      delete advancedFilters.value.payment_status;
      break;
    case 'date_range':
      delete advancedFilters.value.start_date;
      delete advancedFilters.value.end_date;
      break;
    case 'amount_range':
      delete advancedFilters.value.min_amount;
      delete advancedFilters.value.max_amount;
      break;
  }
  updateActiveFilters();
  handleSearch();
};

// 清空所有筛选
const clearAllFilters = () => {
  advancedFilters.value = {};
  activeFilters.value = [];
  handleSearch();
};

const getOrderStatus = (status: OrderStatus) => {
  const map: Record<OrderStatus, { text: string; type: 'success' | 'primary' | 'warning' | 'error' | 'info' }> = {
    [OrderStatus.Pending]: { text: '待处理', type: 'warning' },
    [OrderStatus.Confirmed]: { text: '已确认', type: 'primary' },
    [OrderStatus.Completed]: { text: '已完成', type: 'success' },
    [OrderStatus.Cancelled]: { text: '已取消', type: 'error' },
    [OrderStatus.Rescheduled]: { text: '已改签', type: 'info' },
  };
  return map[status] || { text: '未知', type: 'info' };
};

const getPaymentStatus = (status: PaymentStatus) => {
  const map: Record<PaymentStatus, { text: string; type: 'success' | 'warning' | 'error' }> = {
    [PaymentStatus.Unpaid]: { text: '未支付', type: 'warning' },
    [PaymentStatus.Paid]: { text: '已支付', type: 'success' },
    [PaymentStatus.Refunded]: { text: '已退款', type: 'error' },
  };
  return map[status] || { text: '未知', type: 'warning' };
};

const formatTime = (timestamp: number) => {
  return moment(timestamp * 1000).format('YYYY-MM-DD HH:mm');
};

// 暴露方法给其他页面调用
defineExpose({
  applyFilter,
});

onShow(async () => {
  await preloadAllData();
  loadSearchHistory();
  await getStatistics();
  handleSearch();
});
</script>

<style lang="scss" scoped>
.order-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #1890FF 0%, #F0F9FF 30%);
}

.header {
  padding-top: var(--status-bar-height);
  background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
  
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx;
    
    .header-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #fff;
    }
    
    .header-actions {
      display: flex;
      align-items: center;
    }
  }
}

.overview-section {
  margin: -20rpx 32rpx 32rpx;
  
  .overview-card {
    display: flex;
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 20rpx rgba(24, 144, 255, 0.1);
    
    .overview-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
      }
      
      .overview-value {
        font-size: 32rpx;
        font-weight: 600;
        color: #1890FF;
        margin-bottom: 8rpx;
      }
      
      .overview-label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.search-section {
  padding: 0 32rpx 32rpx;
  
  .search-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .search-input-wrapper {
      display: flex;
      align-items: center;
      gap: 16rpx;
      
      .search-input {
        flex: 1;
        height: 72rpx;
        padding: 0 24rpx;
        border: 2rpx solid #e8e8e8;
        border-radius: 36rpx;
        font-size: 28rpx;
        background: #f8f8f8;
        
        &:focus {
          border-color: #1890FF;
          background: #fff;
        }
      }
      
      .search-btn {
        height: 72rpx;
        padding: 0 32rpx;
        background: #1890FF;
        color: #fff;
        border: none;
        border-radius: 36rpx;
        font-size: 28rpx;
        
        &:active {
          background: #40A9FF;
        }
      }
    }
  }
}

.loading-state {
  padding: 32rpx;
  
  .loading-skeleton {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 16rpx;
    
    .skeleton-line {
      height: 32rpx;
      background: #f0f0f0;
      border-radius: 4rpx;
      margin-bottom: 16rpx;
      animation: skeleton-loading 1.5s ease-in-out infinite;
      
      &.short {
        width: 60%;
      }
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 32rpx;
  
  .empty-icon {
    font-size: 120rpx;
    margin-bottom: 24rpx;
    opacity: 0.3;
  }
  
  .empty-title {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 16rpx;
    font-weight: 600;
  }
  
  .empty-desc {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 48rpx;
    text-align: center;
  }
  
  .retry-btn {
    padding: 16rpx 48rpx;
    background: #1890FF;
    color: #fff;
    border: none;
    border-radius: 8rpx;
    font-size: 28rpx;
    
    &:active {
      background: #40A9FF;
    }
  }
}

.load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32rpx;
  
  text {
    font-size: 24rpx;
    color: #999;
  }
}

@keyframes skeleton-loading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.modules-section {
  padding: 0 32rpx 32rpx;
  
  .modules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24rpx;
    
    .module-card {
      position: relative;
      background: #fff;
      border-radius: 16rpx;
      padding: 32rpx 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
      }
      
      .module-icon {
        margin-bottom: 16rpx;
      }
      
      .module-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .module-desc {
        font-size: 24rpx;
        color: #999;
      }
      
      .module-badge {
        position: absolute;
        top: 16rpx;
        right: 16rpx;
        background: #FF4D4F;
        border-radius: 20rpx;
        padding: 4rpx 12rpx;
        
        .badge-text {
          font-size: 20rpx;
          color: #fff;
        }
      }
    }
  }
}

.quick-actions {
  padding: 0 32rpx 32rpx;
  
  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: block;
  }
  
  .actions-scroll {
    white-space: nowrap;
    
    .actions-list {
      display: flex;
      gap: 24rpx;
      padding-bottom: 16rpx;
      
      .action-item {
        flex-shrink: 0;
        background: #fff;
        border-radius: 12rpx;
        padding: 24rpx 32rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 120rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
        
        .action-icon {
          margin-bottom: 12rpx;
        }
        
        .action-text {
          font-size: 24rpx;
          color: #333;
          white-space: nowrap;
        }
      }
    }
  }
}

.tabs-section {
  padding: 0 32rpx 32rpx;
  
  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: block;
  }
  
  .tabs-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  }
}

.filter-section {
  padding: 0 32rpx 32rpx;
  
  .filter-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .filter-tags {
      flex: 1;
      white-space: nowrap;
      
      .filter-tag {
        display: inline-flex;
        align-items: center;
        gap: 8rpx;
        background: #1890FF;
        color: #fff;
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 20rpx;
        margin-right: 12rpx;
        
        .filter-text {
          max-width: 120rpx;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    
    .clear-filters {
      font-size: 24rpx;
      color: #1890FF;
      padding: 8rpx 16rpx;
    }
  }
}

.order-list-section {
  padding: 0 32rpx 32rpx;
  
  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: block;
  }
  
  .order-list-scroll {
    height: 600rpx;
  }
  
  .order-list {
    .order-card {
      background: #fff;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 16rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
      }
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 16rpx;
        border-bottom: 1rpx solid #f0f0f0;
        
        .order-no {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }
      }
      
      .card-body {
        padding: 16rpx 0;
        
        .info-row {
          display: flex;
          margin-bottom: 12rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .info-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            
            .info-label {
              font-size: 20rpx;
              color: #999;
              margin-bottom: 4rpx;
            }
            
            .info-value {
              font-size: 24rpx;
              color: #333;
              font-weight: 500;
            }
          }
        }
      }
      
      .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 16rpx;
        border-top: 1rpx solid #f0f0f0;
        
        .time {
          font-size: 20rpx;
          color: #999;
        }
        
        .amount {
          font-size: 28rpx;
          font-weight: 600;
          color: #1890FF;
        }
      }
    }
  }
}
</style>
